<template>
  <section class="contianer">
    <el-row type="flex" justify="space-between">
      <!-- 顶部过滤列表 -->
      <div class="flights-content">
        <!-- 过滤条件 -->
        <div>
          <FlightsFilters
            v-if="flightsData.options"
            :data="flightsData"
            :flights="flightsData.flights"
            @setflights="setflights"
          />
        </div>

        <!-- 航班头部布局 -->
        <div>
          <flightsheader />
        </div>

        <!-- 航班信息 -->
        <div>
          <flightsItme :data="data" v-for="data in dataList" :key="data.id" />
        </div>
        <div v-if="flightsData.flights&&flightsData.flights.length==0">没有啦啦啦啦啦啦</div>
        <!-- 分页 -->
        <el-pagination
          v-if="flightsData.flights"
          layout="sizes, prev, pager, next,jumper,total,slot"
          :total="flightsData.flights.length"
          @current-change="currentchang"
          @size-change="sizechang"
          :page-sizes="[2,5, 10, 20, 30]"
          :page-size="pageSize"
        ></el-pagination>
      </div>

      <!-- 侧边栏 -->
      <div class="aside">
        <!-- 侧边栏组件 -->
        <flightsAside />
      </div>
    </el-row>
  </section>
</template>

<script>
import moment from "moment";
import flightsheader from "@/components/air/flightsListHead";
import flightsItme from "@/components/air/flightsItem";
import FlightsFilters from "@/components/air/flightsFilters";
import flightsAside from "@/components/air/flightsAside";
export default {
  components: {
    flightsheader,
    flightsItme,
    FlightsFilters,
    flightsAside
  },
  data() {
    return {
      flightsData: {}, // 航班总数据
      dataList: [], //机票分页截取出来的数据数据
      pageIndex: 1,
      pageSize: 5
    };
  },
  created() {
    this.locatpage();
  },
  methods: {
    locatpage() {
      this.$axios({
        url: "/airs",
        params: this.$route.query
      }).then(res => {
        // this.dataList = res.data.flights;
        this.flightsData = res.data;
        this.setDatalist();
      });
    },

    setDatalist() {
      const beginIndex = (this.pageIndex - 1) * this.pageSize;
      const endIndex = beginIndex + this.pageSize;
      this.dataList = this.flightsData.flights.slice(beginIndex, endIndex);
      //   console.log(this.dataList);
    },
    sizechang(value) {
      this.pageSize = value;
      // this.pageIndex = 1;
      this.setDatalist();
    },
    //切换页数时改变
    currentchang(newIndex) {
      this.pageIndex = newIndex;
      this.setDatalist();
    },
    setflights(newdislist) {
      console.log("接受到了返回来的数据");
      this.dataList = newdislist;
    }
  },

  watch: {
    $route() {
      this.locatpage();
    }
  }
};
</script>

<style scoped lang="less">
.contianer {
  width: 1000px;
  margin: 20px auto;
}

.flights-content {
  width: 745px;
  font-size: 14px;
}

.aside {
  width: 240px;
}
</style>